<template>
	<view class="sellingBox">
		<view class="top">
			<view class="top__bg"></view>
			<text class="top__title">{{ isMerchant ? '商户发车' : '我要卖车' }}</text>
			<text class="top__subTitle">请仔细填写您的卖车信息</text>
		</view>
		<view class="info">
			<view class="box">
				<view class="item upload">
					<view class="title">
						上传铭牌照片
						<text class="icon-mark iconfontPT iconwenhao" @click="gotovin"></text>
					</view>
					<view class="uplaodImgBox">
						<view v-if="params.vin_image" class="chooseImage flex-y-center">
							<view class="uplaodImgBox__delete" @tap="handleDeleteImage('vin_image')">×</view>
							<image :src="`${host}${params.vin_image}`" mode="aspectFill" lazy-load="true"></image>
						</view>
						<view v-else class="chooseImage flex-y-center" @click="handleUploadOcrImage()">
							<text class="iconfontPT icontianjia block"></text>
							<text class="text">车辆铭牌</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="label">
						VIN
						<text class="label-tip"> (识别完成请手动点击搜索)</text>
						<text class="icon-mark iconfontPT iconwenhao" @click="gotovin"></text>

					</view>
					<view class="item__content">
						<view class="vin-item" v-if="params.vin.length > 0">
							<view class="vin-item__input" selectable="true">
								<view class="vin-item__input__i" :class="{ 'input-active': carIndex == i && isSelected, 'input-null': v === '―' }"
								 @tap.stop="vinKeyHandle(i)" v-for="(v, i) in params.vin" :key="i" v-show="i < 17">
									{{ v }}
								</view>
							</view>
						</view>
						<view v-else class="vin-item" @tap="openKeybd()"><text class="vin-placeholder-txt gray">通过上方铭牌自动识别或手动修改</text></view>

						<!-- <input type="text" class="item__content__vin" v-model="params.vin" placeholder="此处可通过上方铭牌自动识别" /> -->
						<text v-if="params.vin.length === 17" class="iconfontPT iconsousuo serachIcon" @click="getCarinfo"></text>
					</view>
				</view>
				<view class="item">
					<!-- <text class="iconfontPT iconup" @click="scan"></text> -->
					<view class="label">车型</view>
					<view class="item__content">
						<input type="text" placeholder="请选择车型" @click="chooseModel" v-model="carInfo_Name" />
						<text class="iconfontPT iconxiayibu more"></text>
					</view>
				</view>
				<view class="item">
					<view class="label">心里价位</view>
					<view class="item__content"><input type="text" v-model="params.price" placeholder="请输入您的心里价位(万元)" /></view>
				</view>
				<view class="item">
					<view class="label">级别</view>
					<view class="item__content">
						<picker @change="bindPickerChange1" :range="levList1">
							<view class="flex ju-be">
								<view class="uni-input">{{ levList1[index1] }}</view>
								<view class="iconfontPT icondown1"></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="item">
					<view class="label">排放标准</view>
					<view class="item__content">
						<picker @change="bindPickerChange2"  :range="levList2">
							<view class="flex ju-be">
								<view class="uni-input">{{ levList2[index2] }}</view>
								<view class="iconfontPT icondown1"></view>
							</view>
						</picker>
					</view>
				</view>
				<!-- <view class="item">
					<text class="label">地址</text>
					<input type="text" v-model="params.city" placeholder="请选择售卖地址" @click="choosecity" />
					<text class="iconfontPT iconxiayibu more"></text>
				</view> -->
				<view class="item">
					<view class="label">里程</view>
					<view class="item__content"><input type="text" v-model="params.mileage" placeholder="请输入表显里程(万公里)" /></view>
				</view>
				<view class="item" v-if="!isMerchant">
					<view class="label">保险(开始时间)</view>
					<view class="item__content">
						<picker mode="date" :value="time1" @change="timeChange($event, 'time1')">
							<view class="flex ju-be">
								<view class="uni-input">{{ time1 }}</view>
								<text class="iconfontPT icondown1"></text>
							</view>
						</picker>
					</view>
				</view>
				<view class="item">
					<view class="label">保险(结束时间)</view>
					<!-- <input type="text" v-model="time" placeholder="请选择到期时间/险种" @click="chooseInsurance" />
					<text class="iconfontPT iconxiayibu more"></text> -->
					<view class="item__content">
						<picker mode="date" fields="month" :value="time2" @change="timeChange($event, 'time2')">
							<view class="flex ju-be">
								<view class="uni-input">{{ time2 }}</view>
								<view class="iconfontPT icondown1"></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="item">
					<view class="label">险种</view>
					<!-- <picker @change="bindPickerChange" :range="levList">
						<label class="">{{levList[index]}}</label>
					</picker> -->
					<view class="item__content item__content--insurance">
						<!-- <view class="uni-title uni-common-mt">默认样式</view> -->
						<!-- <view> -->
						<checkbox-group @change="xianClass" class="checkbox-box">
							<label v-for="(item, index) in levList" :key="index" class="insurance-checkbox">
								<checkbox :value="item" checked="true" size="4" />
								{{ item }}
							</label>
							<!-- <label>
									<checkbox value="cb" />未选中
								</label> -->
						</checkbox-group>
						<!-- </view> -->
					</view>
				</view>
				<!-- <view class="line"></view>
						<picker mode="date" :value="time2" @change="timeChange($event,'time2')">
							<view class="uni-input">{{time2}}</view>
						</picker> -->
				<view class="item">
					<view class="label">初登日期</view>
					<view class="item__content">
						<picker mode="date" :value="card_time" @change="timeChange($event, 'card_time')">
							<view class="flex ju-be">
								<view class="uni-input">{{ card_time }}</view>
								<view class="iconfontPT icondown1"></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="item">
					<view class="label">姓名</view>
					<view class="item__content"><input type="text" v-model="params.uname" placeholder="请输入姓名" /></view>
				</view>
				<view class="item">
					<view class="label">手机号</view>
					<view class="item__content flex-x-between">
						<input type="text" v-model="params.phone" placeholder="请输入手机号" />
						<phone-button @change="params.phone = $event"></phone-button>
					</view>
					
				</view>
				<view class="item remark">
					<view class="label">车况描述</view>
					<view class="checktag-group">
						<view class="checktag-item" @click="handleShortcutPhraseChange(index)" v-for="(item,index) in shortcutPhraseList" :key="index">
							<u-tag :text="item.text" :type="item.checked?'primary':'info'"/>
						</view>
					</view>
<!-- 					<u-checkbox-group size="24" width="33.33%">
						<u-checkbox label-size="24" @change="handleShortcutPhraseChange" v-for="(item,index) in shortcutPhraseList" v-model="item.checked" :name="item.text" :key="index">{{item.text}}</u-checkbox>
					</u-checkbox-group> -->
					<view class="item__content"><textarea class="remark__textarea" v-model="params.content" placeholder="简要描述您爱车的维修记录,有无瑕疵等信息......" /></view>
				</view>
				<view v-if="false">
					<view class="item upload">
						<view class="title">请上传车辆外观照片</view>
						<view class="uplaodImgBox">
							<view v-if="params.p_image" class="chooseImage flex-y-center">
								<view class="uplaodImgBox__delete" @tap="handleDeleteImage('p_image')">×</view>
								<image :src="`${host}${params.p_image}`" mode="aspectFill" lazy-load="true"></image>
							</view>
							<view v-else @click="handleUploadImage('p_image')" class="chooseImage flex-y-center">
								<text class="iconfontPT icontianjia block"></text>
								<text class="text">正面照(必传)</text>
							</view>
					
							<view v-if="params.back_image" class="chooseImage flex-y-center">
								<view class="uplaodImgBox__delete" @tap="handleDeleteImage('back_image')">×</view>
								<image :src="`${host}${params.back_image}`" mode="aspectFill" lazy-load="true"></image>
							</view>
							<view v-else @click="handleUploadImage('back_image')" class="chooseImage flex-y-center">
								<text class="iconfontPT icontianjia block"></text>
								<text class="text">后侧照(必传)</text>
							</view>
					
							<view v-if="params.pleft_image" class="chooseImage flex-y-center">
								<view class="uplaodImgBox__delete" @tap="handleDeleteImage('pleft_image')">×</view>
								<image :src="`${host}${params.pleft_image}`" mode="aspectFill" lazy-load="true"></image>
							</view>
							<view v-else @click="handleUploadImage('pleft_image')" class="chooseImage flex-y-center">
								<text class="iconfontPT icontianjia block"></text>
								<text class="text">正左照(非必传)</text>
							</view>
							
							<view v-if="params.pright_image" class="chooseImage flex-y-center">
								<view class="uplaodImgBox__delete" @tap="handleDeleteImage('pright_image')">×</view>
								<image :src="`${host}${params.pright_image}`" mode="aspectFill" lazy-load="true"></image>
							</view>
							<view v-else @click="handleUploadImage('pright_image')" class="chooseImage flex-y-center">
								<text class="iconfontPT icontianjia block"></text>
								<text class="text">正右照(非必传)</text>
							</view>
					
							<view v-if="params.lback_image" class="chooseImage flex-y-center">
								<view class="uplaodImgBox__delete" @tap="handleDeleteImage('lback_image')">×</view>
								<image :src="`${host}${params.lback_image}`" mode="aspectFill" lazy-load="true"></image>
							</view>
							<view v-else @click="handleUploadImage('lback_image')" class="chooseImage flex-y-center">
								<text class="iconfontPT icontianjia block"></text>
								<text class="text">左后照(非必传)</text>
							</view>
					
							<view v-if="params.rback_image" class="chooseImage flex-y-center">
								<view class="uplaodImgBox__delete" @tap="handleDeleteImage('rback_image')">×</view>
								<image :src="`${host}${params.rback_image}`" mode="aspectFill" lazy-load="true"></image>
							</view>
							<view v-else @click="handleUploadImage('rback_image')" class="chooseImage flex-y-center">
								<text class="iconfontPT icontianjia block"></text>
								<text class="text">右后照(非必传)</text>
							</view>
							
						</view>
					</view>
					<view class="item upload">
						<view class="title">请上传车辆内饰照片</view>
						<view class="uplaodImgBox">
							<view class="chooseImage chooseImage2 flex-y-center" v-for="(item, index) in params.inter_image" :key="index">
								<image :src="`${host}${item}`" mode="aspectFill" lazy-load="true"></image>
								<view class="uplaodImgBox__delete" @tap="handleDeleteImage('inter_image',index)">×</view>
							</view>
							<view class="chooseImage chooseImage2 flex-y-center" @click="handleUploadImage('inter_image',6)" v-if="params.inter_image.length < 6">
								<text class="iconfontPT icontianjia block"></text>
								<text class="text">2-6张(可多选)</text>
							</view>
						</view>
					</view>
					
					<view class="item upload">
						<view class="title">请上传发动机机舱照片</view>
						<view class="uplaodImgBox">
							<view class="chooseImage chooseImage2 flex-y-center" v-for="(item, index) in params.cabin_image" :key="index">
								<image :src="`${host}${item}`" mode="aspectFill" lazy-load="true"></image>
								<view class="uplaodImgBox__delete" @tap="handleDeleteImage('cabin_image',index)">×</view>
							</view>
							<view class="chooseImage chooseImage2 flex-y-center" @click="handleUploadImage('cabin_image',3)" v-if="params.cabin_image.length < 3">
								<text class="iconfontPT icontianjia block"></text>
								<text class="text">1-3张(可多选)</text>
							</view>
						</view>
					</view>
				</view>
				<view  v-if="true">
					<view class="item upload">
						<view class="title">请上传车辆照片<text class="gray sub-title">(必含正前方和正后方)</text></view>
						<view class="uplaodImgBox">
							<view class="chooseImage chooseImage2 flex-y-center" v-for="(item, index) in params.all_image" :key="index">
								<image :src="`${host}${item}`" mode="aspectFill" lazy-load="true"></image>
								<view class="uplaodImgBox__delete" @tap="handleDeleteImage('all_image',index)">×</view>
							</view>
							<view class="chooseImage chooseImage2 flex-y-center" @click="handleUploadImage('all_image',15)" v-if="params.all_image.length < 15">
								<text class="iconfontPT icontianjia block"></text>
								<text class="text">1-15张(至少6张)</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="buttonBox">
				<view @click="sellcar(0)" class="btn-sell btn-sell--left">
					<text class="btn-sell__name">我要卖车</text>
					<text class="btn-sell__tips">完全免费</text>
				</view>
				<view @click="sellcar(1)" class="btn-sell btn-sell--right">
					<text class="btn-sell__name">急速卖车</text>
					<text class="btn-sell__tips">免费体验</text>
				</view>
			</view>
			<u-checkbox-group class="pact-list">
				<template v-if="isMerchant">
					<u-checkbox v-model="readChecked1" shape="circle">
						<view class="pact-list__title">我已阅读并同意</view>
					</u-checkbox>
					<view class="pact-list__text">
						<navigator class="pact-list__link" url="/pages/used-car/xieyi?type=3">《车一转共享平台经销商使用服务协议》</navigator>
					</view>
				</template>
				<template v-else>
					<u-checkbox v-model="readChecked0" shape="circle">
						<view class="pact-list__title">我已阅读并同意 </view>
					</u-checkbox>
					<view class="pact-list__text">
						<navigator class="pact-list__link" url="/pages/used-car/xieyi?type=0">《个人信息保护声明》</navigator>
						<navigator class="pact-list__link" url="/pages/used-car/xieyi?type=2">《车一转车辆上传使用规则》</navigator>
					</view>
				</template>
			</u-checkbox-group>
		</view>
		<tki-float-keyboard title="车架号" ref="keybd" mode="car" type="'1'" @del="keybdDel" @val="keybdVal" @hide="carIndex = -1"></tki-float-keyboard>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref="imageCompress" />
	</view>
</template>

<script>
import PhoneButton from '@/pages/components/public/phone-button.vue'
import { sellCar, wPay, vinCar } from '../../apis/used-car/api.js';
import tkiFloatKeyboard from '../components/tki-float-keyboard/tki-float-keyboard.vue'

import {baseHost} from '@/setting.js'
import Upload from '@/utils/upload.js'

const { uploadImage } = new Upload({ url:baseHost.car + '/api/common/upImage'})

export default {
	data() {
		// const currentDate = this.getDate({
		// 	format: true
		// });
		const currentDate = this.$u.timeFormat(null,'yyyy-mm');
		const currentMonth = this.$u.timeFormat(null,'yyyy-mm');

		return {
			readChecked1:false,
			readChecked0:false,
			carIndex: -1,
			isSelected: false,
			carInfo_Name: '',
			time1: currentDate,
			time2: currentMonth,
			card_time: currentDate,
			levList1: ['微型车', '小型车', '紧凑型车', '中型车', '中大型车', '豪华车', 'SUV', '小型SUV','MPV', '跑车', '面包车', '皮卡车'],
			levList2: ['国Ⅵ', '国Ⅴ', '国Ⅳ', '国Ⅲ', '国Ⅱ'],
			index1: 2,
			index2: 1,
			index: 0,
			inter_image: [],
			cabin_image: [],
			all_image:[],
			params: {
				trans_type:'',
				intake:'',
				displacement:'',
				phone:'',
				city: '',
				// brand_id:'',
				carInfo_id: '',
				card_time: currentDate,
				carname: '',
				p_image: '',
				vin: '',
				sale_time: currentDate,
				expires_time: currentDate,
				back_image: '',
				pleft_image: '',
				pright_image: '',
				lback_image: '',
				rback_image: '',
				inter_image: [],
				cabin_image: [],
				all_image:[],
				vin_image: '',
				Insurance: '交强险,商业险',
				level: '紧凑型',
				envir: '国VI',
				content: '',
				distributor_id: '',
				type: 1
			},
			levList: ['交强险', '商业险'],
			shortcutPhraseList:[
				{
					text:'结构件无损伤',
					checked:false,
				},
				{
					text:'整车无事故',
					checked:false,
				},
				{
					text:'无水泡无火烧',
					checked:false
				},
				{
					text:'小瑕疵',
					checked:false
				},
				{
					text:'已整备',
					checked:false
				},
				{
					text:'准新车',
					checked:false
				},
				{
					text:'车况好',
					checked:false
				},
				{
					text:'合资车',
					checked:false
				},
				{
					text:'练手代步首选',
					checked:false
				},
				{
					text:'创业打拼首选',
					checked:false
				},
				{
					text:'家用舒适性高',
					checked:false
				},
				{
					text:'安全性高',
					checked:false
				},
				{
					text:'超级省油',
					checked:false
				},
				{
					text:'品牌值得信赖',
					checked:false
				},
				{
					text:'支持全款按揭',
					checked:false
				},
				{
					text:'支持检测',
					checked:false
				}
			]
		};
	},
	components: {
		tkiFloatKeyboard,
		PhoneButton
	},
	computed: {
		host() {
			return this.$baseHost.qiniuHost;
		},
		ocrHost(){
			return this.$baseHost.car + '/api/common/ocrUpload'
		},
		/**
		 * 是否是商户销售
		 */
		isMerchant() {
			return uni.getStorageSync('isMerchant');
		},

		distributor_id() {
			return uni.getStorageSync('distributor_id');
		}
	},

	onLoad(option) {
		const initParams = uni.getStorageSync('sellingCarsInfo') || {};
		this.params = {
			...this.params,
			...initParams
		};
		const locationCity = uni.getStorageSync('location').city
		this.params.city = option.city || uni.getStorageSync('position') || locationCity.endsWith('市') ? locationCity.slice(0,-1) : locationCity
		this.params.phone = this.$u.test.mobile(uni.getStorageSync('phone')) ? uni.getStorageSync('phone'):'';
		this.isMerchant && uni.setNavigationBarTitle({title: '商户发车'});

	},
	onShow: function() {
		const initParams = uni.getStorageSync('sellingCarsInfo') || {};
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1]; //当前页面
		this.params.brand_id = this.params.brand_id ? this.params.brand_id : currPage.data.brand_id;
		this.params.carInfo_id = this.params.carInfo_id ? this.params.carInfo_id : currPage.data.id;
		this.params.carname = this.params.carname ? this.params.carname : currPage.data.name;
		this.carInfo_Name = currPage.data.name || initParams.carname;
	},
	
	onUnload() {
		if(this.params.vin&&this.params.vin.length==17){
			if (this.carInfo_Name) {
				this.params.carname = this.carInfo_Name;
			}
			uni.setStorageSync('sellingCarsInfo', this.params);
		}
    },
	methods: {
		handleShortcutPhraseChange(index){
			this.shortcutPhraseList[index].checked = !this.shortcutPhraseList[index].checked
			if(this.shortcutPhraseList[index].checked){
				this.params.content = this.params.content + this.shortcutPhraseList[index].text + ';'
			}else{
				this.params.content = this.params.content.replace(this.shortcutPhraseList[index].text+';','')
			}
		},
		openKeybd() {
			this.$refs.keybd._keyShow();
		},

		closeKeybd() {
			this.$refs.keybd._keyHide();
		},

		vinKeyHandle(index) {
			this.openKeybd();

			this.carIndex = index;
			this.isSelected = true;
		},
		/*点击浮动键盘value值处理*/
		keybdVal(val) {
			let vinArr = this.params.vin.split('');

			if (this.isSelected) {
				console.log('update', val);
				vinArr.splice(this.carIndex, 1, val);
			} else {
				console.log('add', val);
				vinArr.length < 17 && vinArr.push(val);
				console.log(vinArr.length)
				this.isSelected = false;
			}

			if (this.carIndex == vinArr.length - 1) {
				this.isSelected = false;
			}

			this.params.vin = vinArr.join('');
			this.carIndex += 1;

			if (this.params.vin.length == 17 && !this.isSelected) {
				this.closeKeybd();
			}
		},
		/*点击浮动键盘删除*/
		keybdDel(val) {
			this.isSelected = true;

			let vinArr = this.params.vin.split('');
			vinArr.splice(this.carIndex, 1, '―');

			this.params.vin = vinArr.join('');

			// if (vinArr.length === 0) {
			// 	this.closeKeybd();
			// 	this.isSelected = false;
			// }
		},

		gotovin() {
			uni.navigateTo({
				url: '/pages/used-car/vin'
			});
		},
		// 改变险种
		xianClass: function(e) {
			this.params.Insurance = e.detail.value.toString();
		},
		timeChange(e, key) {
			this.params[key] = e.target.value;
			if (key == 'card_time') this.card_time = e.target.value;
			if (key == 'time1') {
				this.time1 = e.target.value;
				this.params.sale_time = e.target.value;
			}
			if (key == 'time2') {
				if (e.target.value < this.time1) {
					uni.showToast({
						title: '结束时间必须大于开始时间,请重新选择',
						icon: 'none'
					});
					return;
				}
				this.time2 = e.target.value;
				this.params.expires_time = e.target.value;
			}
		},
		bindPickerChange(e) {
			this.index = e.target.value;
			this.params.Insurance = this.levList1[this.index];
		},
		bindPickerChange1(e) {
			this.index1 = e.target.value;
			this.params.level = this.levList1[this.index1];
		},
		bindPickerChange2(e) {
			this.index2 = e.target.value;
			this.params.envir = this.levList2[this.index2];
		},
		datechange(e) {
			this.params.card_time = e.target.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		gotoxieyi() {
			uni.navigateTo({
				url: `/pages/used-car/xieyi?type=${this.isMerchant?'1':'0'}`
			});
		},
		getCarinfo() {
			let that = this;
			if (that.params.vin != '') {
				uni.getStorage({
					key: 'userInfo',
					success(e) {
						let factory_id = e.data.factoryid || '1';
						vinCar({
							factory: factory_id,
							vin: that.params.vin
						}).then(res => {
							if (res.code == 1 && res.data != null) {
								for (var i in res.data.select) {
									that.params.carInfo_id = i;
									that.carInfo_Name = res.data.select[i];
								}
								that.params.carname = that.carInfo_Name;
								that.params.brand_id = res.data.brand_id;
								that.params.level = res.data.level;
								that.params.intake = res.data.intake
								that.params.displacement = res.data.displacement
								that.params.trans_type = res.data.trans_type
								//回显
								that.index1 = that.levList1.findIndex(item=>item==that.params.level);
							} else {
								uni.showToast({
									title: '当前车架号暂未收录，请手动录入信息',
									icon: 'none'
								});
							}
						});
					}
				});
			} else {
				uni.showToast({
					title: '未能识别到车架号',
					icon: 'none'
				});
			}
		},
		async handleUploadOcrImage(){
			const {data} = await uploadImage({url:this.ocrHost})
			this.params['vin_image'] = data[0].url
			this.params.vin = data[0].vin || ''
			this.isSelected = false
			this.getCarinfo()
		},
		async handleUploadImage(type,count) {
			const {data} = await uploadImage({count})
			this.params[type] = count > 1 ?[...this.params[type],...data.map(item=>item.url)] : data[0].url 
		},
		handleDeleteImage(type,index){
		  this.params[type] = Array.isArray(this.params[type]) ? this.params[type].filter((item,i)=> i !== index) : ''
		},
		chooseModel() {
			uni.navigateTo({
				url: '/pages/used-car/allCarList'
			});
		},
		directToUsedCar() {
			uni.navigateTo({
				url: '/pages/personal/used-car/index'
			});
		},

		sellcar(typeName) {
			if (!this.$u.test.mobile(this.params.phone)) {
				uni.showToast({
					title: '手机号码不正确',
					icon:'none'
				});
				return false;
			}
			if (this.isMerchant ? !this.readChecked1: !this.readChecked0) {
				uni.showToast({
					title: '请先阅读协议并同意',
					icon:'none'
				});
				return false;
			}
			let _that = this;
			let params = {...this.params}, userinfo = {};
			let uid = '';
			uni.getStorage({
				key: 'userId',
				success: function(e) {
					uid = e.data;
				}
			});
			let openid = '';
			uni.getStorage({
				key: 'openId',
				success(e) {
					openid = e.data;
				}
			});

			uni.getStorage({
				key: 'userInfo',
				success(e) {
					userinfo = e.data;
					params.uid = uid || '';
					params.openid = openid || 'o3s0a470egv2uFSjbhIKrMX38qzo';
					params.factory_id = userinfo.factoryid || '1';
					params.car_id = _that.id;
					params.type = 3;
					params.class = typeName == 1 ? 'speed' : 'sell';
					params.is_fast = typeName;
					params.cabin_image = _that.params.cabin_image.join(',');
					params.inter_image = _that.params.inter_image.join(',');
					params.all_image   = _that.params.all_image.join(',');
					params.envir = _that.params.envir
					params.intake = _that.params.intake
					params.displacement = _that.params.displacement
					params.trans_type = _that.params.trans_type
					uni.showToast({
						title: '加载中',
						icon: 'loading',
						duration: 10000000,
						mask: true
					});

					if (_that.isMerchant) {
						params.distributor_id = _that.distributor_id;
						params.type = 2;
					} else {
						params.type = 1;
					}
					// console.log(params);return false;
					sellCar(params).then(res => {
						let result = res.data; //接口返回数据
						uni.hideToast();
						if (res.code == 1) {
							// uni.hideToast();

							if(res.data && res.data.appId){
								uni.requestPayment({
									//下面参数为必传
									appId: res.data.appId, //小程序Appid
									timeStamp: res.data.timeStamp, //创建订单时间戳
									nonceStr: res.data.nonceStr,
									package: res.data.package, // 订单包
									signType: 'MD5', // 加密方式统一'MD5'
									paySign: res.data.paySign, // 后台支付签名返回
									success(res) {
										uni.showToast({
											title: '支付成功！请耐心等待平台审核',
											icon: 'none',
											duration:2000
										});
										uni.removeStorageSync('sellingCarsInfo');
										_that.params={};
										_that.directToUsedCar();
									},
									fail(err) {
										uni.showToast({
											title: '支付失败！',
											icon: 'success'
										});
										// uni.removeStorageSync('sellingCarsInfo');
									}
								});
							}else{
								uni.showToast({
									title: '发布成功！请耐心等待平台审核',
									icon: 'none',
									duration:2000
								});
								
								uni.removeStorageSync('sellingCarsInfo');
								_that.params.vin='';
								_that.carInfo_Name='';
								_that.cabin_image=[];
								_that.inter_image=[];
								_that.all_image =[];
								_that.params={};
								_that.directToUsedCar();
							}

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration:3000
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
.sellingBox {
	padding-bottom: 0rpx;

	.top {
		height: 375rpx;
		padding: 0 74rpx;
		background-image: url('http://cdn1.cheyizhuan.com/sell_car_bg.png-t.m98xx');
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: contain;
		position: relative;

		&__bg {
			background-color: #0083f0;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 300rpx;
			z-index: -1;
		}

		&__title {
			font-size: 45rpx;
			font-weight: bold;
			color: #fff;
			display: block;
			padding-top: 60rpx;
		}

		&__subTitle {
			font-size: 28rpx;
			color: #c8e5fe;
			margin-top: 22rpx;
			display: block;
		}
	}
	.fontSize {
		font-size: 38rpx;
	}
	.info {
		box-shadow: 0rpx 3rpx 11rpx 2rpx rgba(0, 131, 240, 0.13);
		margin: -40rpx auto 0;
		width: 612rpx;
		padding: 50rpx 30rpx 30rpx;
		position: relative;
		top: -70rpx;
		border-radius: 10rpx;

		.ysColor {
			color: #007aff !important;
		}
		.box {
			background-color: #fff;
			box-sizing: border-box;
			width: 100%;
			border-radius: 10rpx;

			.item {
				border-bottom: 1rpx solid rgba(0, 131, 240, 0.13);
				position: relative;

				&.upload,
				&.remark {
					border-bottom: 0;
				}

				&__content {
					padding: 22rpx 0;
					position: relative;

					.checkbox-box {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: flex-start;

						.insurance-checkbox {
							margin: 0 20rpx 20rpx;
							width: calc(50% - 40rpx);
						}
					}

					&__vin {
						width: 460rpx;
					}
				}

				&:last-child {
					border: none;
				}
				.label {
					display: block;
					
				}
				
				input,
				picker {
					display: block;
					font-size: 28rpx;
					padding-left: 30rpx;
				}
				.more {
					position: absolute;
					right: 0;
					top: calc(50% - 16rpx);
				}
				.serachIcon {
					position: absolute;
					right: 0;
					z-index: 22;
					top: calc(50% - 16rpx);
				}
			}

			.upload .title,
			.item .label {
				font-size: 28rpx;
				margin: 20rpx 0 15rpx 0;
				font-weight: bold;
				color: #333;
				position: relative;
				padding-left: 30rpx;
				&-tip{
					color: #999999;
					font-weight: 400;
				}
				&::before {
					content: '';
					position: absolute;
					height: 28rpx;
					left: 0;
					border-right: 8rpx solid #0084f0;
					top: calc(50% - 14rpx);
				}

				.icon-mark {
					margin-left: 28rpx;
					color: #ff9a3b;
					font-size: 28rpx;
				}
			}
			
			.upload .sub-title {
				font-weight: normal;
			}
		}
		.remark {
			&__textarea {
				width: calc(100% - 20rpx);
				padding: 10rpx;
				font-size: 24rpx;
				height: 200rpx;
				background-color: #f1f1f1;
			}
		}
		.uplaodImgBox {
			display: flex;
			flex-flow: row wrap;
			width: 100%;
			justify-content: flex-start;
			position: relative;
			&__delete{
				position: absolute;
				top: 0;
				right: 5rpx;
				font-size: 40rpx;
				line-height: 1em;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
				text-shadow: 1rpx 1rpx #CCCCCC;
				z-index: 9;
			}
			&::after {
				content: '';
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}
			.chooseImage {
				width: calc(100% / 3 - 10rpx);
				height: 190rpx;
				background-color: #f2f2f2;
				margin: 0 10rpx 10rpx 0;
				font-size: 24rpx;
				color: #c5c5c5;
				position: relative;
				border-radius: 10rpx;

				.icontianjia {
					color: #c6c6c6;
					font-size: 30rpx;
					margin-bottom: 16rpx;
				}

				.text {
					font-size: 22rpx;
					font-weight: 400;
					color: #c6c6c6;
				}

				// &.chooseImage2 {
				// 	width: 271rpx;
				// 	height: 207rpx;
				// }
				image {
					position: absolute;
					z-index: 1;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}
			}
		}
		.buttonBox {
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn-sell{
					width: 290rpx;
					height: 90rpx;
					color: #fff;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					&--left{
						background: linear-gradient(14deg, #0072e7, #008ff6);
						color: #B5D0F8;
					}
					&--right{
						background: linear-gradient(14deg, #f49446, #fbbe7c);
						color: #FBD8C2;
					}
					&__name{
						font-size: 30rpx;
						color: #FFFFFF;
						font-weight: bold;
					}
					&__tips{
						font-size: 20rpx;
					}
			}
		}
		.Privacy {
			// padding-left: 152rpx;
			font-size: 24rpx;
			color: #808080;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				display: inline;
				margin-right: 20rpx;

				&.checked {
					color: #e41805;
				}
			}
			view {
				display: inline;
				color: #000000;
			}
		}
	}
	.flex {
		display: flex;
		align-items: center;
	}
	.uni-padding-wrap {
		transform: scale(0.8);
		label {
			margin-right: 26rpx;
			margin-bottom: 5rpx;
			margin-bottom: 5rpx;
			display: inline-block;
			// width: 33%;
		}
		checkbox {
			margin-bottom: 12rpx;
			justify-content: space-between;
		}
	}
	.icondown1 {
		margin-left: 4rpx;
		font-size: 44rpx;
	}

	.vin-item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: calc(100% - 30rpx);
		min-height: 54rpx;

		.vin-item__input {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;

			&__i {
				border-bottom: 1rpx solid #bcbcbc;
				font-size: 36rpx;
				color: #333;
				margin-right: 12rpx;
				padding-bottom: 6rpx;
				text-align: center;

				&.input-active {
					border-color: #0084f0;
					color: #0084f0;
				}

				&.input-null {
					min-width: 20rpx;
				}
			}
		}
	}

	.tool-i-a > ._flkey-tool-i-b {
		display: none;
	}

	._flkey-bar-r > ._flkey-bar-btn {
		color: #0084f0;
	}
}

.pact-list{
		padding: 0 0rpx;
		&__title{
			font-size: 24rpx;
			margin: 10rpx 0;
		}
		&__text{
			display: flex;
			font-size: 24rpx;
			color: #808080;
			width: 100%;
		}
		&__link{
			color: #0083F0;
		}
}
.checktag-group{
	display: flex;
	flex-wrap: wrap;
}
.checktag-item{
	width: 33.333%;
	margin: 10rpx 0;
}
</style>
